<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/4/14
  Time: 19:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="${pageContext.request.contextPath}/css/css_whir.css" rel="stylesheet" type="text/css" />
    <title>失物招领详情页</title>
    <script src="${pageContext.request.contextPath}/script/slider.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/script/Columns.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/script/scrollpic.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/liuyan.js" type="text/javascript"></script>
    <link href="${pageContext.request.contextPath}/css/liuyan.css" rel="stylesheet" />
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background: url("${pageContext.request.contextPath}/images/bg.jpg") no-repeat fixed;
        }

        #qq {
            width: 600px;
            /*宽*/
            height: 170px;
            /*高*/
            background: #fff;
            /*背景颜色*/
            margin: 50px auto 30px;
            border-radius: 5px;
            /*Html5 圆角*/
        }

        #qq p {
            font-size: 12px;
            color: #666;
            font-family: "微软雅黑";
            line-height: 45px;
            text-indent: 20px;
        }

        #qq .message {
            width: 560px;
            height: 70px;
            margin: 0 auto;
            overflow: hidden;
            outline: none;
            border: 1px solid #ddd;
            padding: 8px;
            box-sizing: border-box;
            font-size: 14px;
            -webkit-background-clip: text;
            color: transparent;
            background-image: linear-gradient(to right, #778899 0%, #333 100%);
            /*粗细 风格 颜色*/
        }

        #qq .But {
            width: 560px;
            height: 35px;
            margin: 15px auto 0px;
            position: relative;
            /*相对，参考对象*/
        }

        #qq .But img.bq {
            float: left;
            /*左浮动*/
        }

        #qq .But span.submit {
            width: 80px;
            height: 30px;
            background: #ff8140;
            display: block;
            float: right;
            /*右浮动*/
            line-height: 30px;
            border-radius: 5px;
            cursor: pointer;
            /*手指*/
            color: #fff;
            font-size: 12px;
            text-align: center;
            font-family: "微软雅黑";
        }

        /*face begin*/
        #qq .But .face {
            width: 440px;
            background: #fff;
            border: 1px solid #ddd;
            box-shadow: 0 0 12px #666;
            position: absolute;
            /*绝对定位*/
            top: 21px;
            left: 15px;
            display: none;
            /*隐藏*/
        }

        #qq .But .face ul {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 8px;
            box-sizing: border-box;
        }

        #qq .But .face ul li {
            width: 30px;
            height: 30px;
            list-style-type: none;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /*msgCon begin*/
        .msgCon {
            width: 600px;
            margin: 0px auto;
            margin-bottom: 60px;
        }

        .msgCon .msgBox {
            background: #fff;
            padding: 10px;
            box-sizing: border-box;
            margin-top: 16px;
            border-radius: 4px;
        }

        .msgCon .msgBox .headUrl {
            width: 100%;
            height: 60px;
            border-bottom: 1px dotted #ddd;
            display: flex;
            align-items: center;
        }

        .msgCon .msgBox .headUrl img {
            width: 46px;
            height: 46px;
            border-radius: 50%
        }

        .msgCon .msgBox .headUrl div {
            flex: 1;
            display: flex;
            flex-flow: column;
            font-size: 16px;
            margin-left: 16px;
            -webkit-background-clip: text;
            color: transparent;
            background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);
        }

        .msgCon .msgBox .headUrl div .time {
            font-size: 14px;
            margin-top: 6px;
            -webkit-background-clip: text;
            color: transparent;
            background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
        }

        .msgCon .msgBox .headUrl a {
            font-size: 14px;
            padding: 10px;
            color: salmon;
            cursor: pointer;
        }

        .msgCon .msgBox .msgTxt {
            font-size: 14px;
            color: #666;
            min-height: 40px;
            line-height: 24px;
            padding: 10px;
            box-sizing: border-box;
            word-wrap: break-word;
            -webkit-background-clip: text;
            color: transparent;
            background-image: linear-gradient(to right, #778899 0%, #333 100%);
        }
    </style>
</head>
<body>

<!--商品分类 E-->
<h3 style="line-height: 20px;font-size: 16px;color: red;background-color: #aa9b73">当前位置:<a href="${pageContext.request.contextPath}/index/ToIndex" >首页</a>><a href=""> 失物招领</a>><a href="">商品详情页</a> </h3>
<div class="mainbox">

    <!--商品简介 S-->
    <div class="c-top">
        <div class="c-pic">
            <div class="bi-pic"><img src="${lostProducts.photo}" width="385" height="563" /></div>

        </div>
        <div class="c-pd">
            <div class="c-T" style="background-color: #FFFFFF;width: 600px"> ${lostProducts.lost_name}</div>
            <p></p>
            <p tyle="color:#FF7E15;font-size: 17px">发布人：<span style="color:#FF7E15;font-size: 30px">${lostProducts.user.nickname}</span></p>
            <p></p>
            <p tyle="color:#FF7E15;font-size: 17px">类型：<span style="color:#FF7E15;font-size: 30px">${lostProducts.lostProductType.name}</span></p>
            <p></p>
            <p tyle="color:#FF7E15;font-size: 17px">联系电话：<span style="color:#FF7E15;font-size: 30px">${lostProducts.phone}</span></p>
            <p></p>
            <p tyle="color:#FF7E15;font-size: 17px">发布时间：：<span style="color:#FF7E15;font-size: 30px">${lostProducts.time}</span></p>

            <div class="tip">
                <p><em style="color:#f00">商品描述：</em> ${lostProducts.describe_txt}</p>
            </div>
        </div>
    </div>
    <!--商品简介 E-->
</DIV>
</div>
<!--评论-->

<title>留言板的添加和删除</title>
</head>
<body>

<div id="msgBox">

    <h2>来 , 说说你在做什么 , 想什么</h2>

    <form action="${pageContext.request.contextPath}/lostComment/add?l_id=${lostProducts.l_id}" method="post">

        <div><input type="text" id="conBox" name="comment_txt" class="f-text"></div>
        <div class="tr">
            <p>
                <span class="countTxt">还能输入</span><strong class="maxNum">140</strong><span>个字</span>

                <input type="submit" value="发表" title="快捷键 Ctrl+Enter" />
            </p>
        </div>
    </form>
    <div class="list">
        <h3><span>大家在说</span></h3>
        <ul>
            <c:forEach items="${lostComments}" var="lostComments">
                <li>

                    <div class="userPic"><img src="${lostComments.user.photo}" style="width: 50px;height: 50px;border: 1px solid #bc7878;border-radius: 50%;overflow: hidden;"/></div>
                    <div class="content">
                        <div class="userName"><a href="javascript:;">${lostComments.user.nickname}</a></div>
                        <div class="msgInfo">${lostComments.comment_txt}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<c:if test="${userId eq lostComments.id}"><span style="font-size: 13px;color: rebeccapurple;position: absolute;
    right: 56px;width: 300px; "> <a href="${pageContext.request.contextPath}/lostComment/delete?c_id=${lostComments.c_id}&l_id=${lostProducts.l_id}">删除</a></span> </c:if></div>

                        <div class="times"><span>${lostComments.time}  </span></div>
                    </div>

                </li>
            </c:forEach>
        </ul>
    </div>
</div>
</body>
</html>